<template>
	<div class="pinfo-box">
		<el-row>
			<el-col :span="4" style="text-align: right;">商品分类：</el-col>
			<el-col :span="20">
				<el-cascader 
				:clearable="true" 
				:props="{label:'name',value:'id'}" 
				v-model="productAddData.productCategoryId" 
				:options="cateList"
				placeholder="商品名称" 
				@change="handleChange" 
				size="small"></el-cascader>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品名称：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.name"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">副标题：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.subTitle"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品品牌：</el-col>
			<el-col :span="20">
				<el-cascader :clearable="true" :props="{label:'name',value:'id'}" v-model="productAddData.brandId" :options="catList"
					 placeholder="商品品牌" @change="handleBrandChange" size="small"></el-cascader>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品介绍：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.description"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品货号：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.productSn"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品售价：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.price"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">市场价：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.originalPrice"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品库存：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.stock"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">计量单位：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.unit"/></el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">商品重量：</el-col>
			<el-col :span="20"><el-input type="text" class="iptext" size="small" v-model="productAddData.weight" style="margin-right:20px;width:300px;"/>克</el-col>
		</el-row>
		<el-row>
			<el-col :span="4" style="text-align: right;">排序：</el-col>
			<el-col :span="20"><el-input type="text" size="small" class="iptext" v-model="productAddData.sort"/></el-col>
		</el-row>
		<el-button type="success" @click="next">下一步，填写商品促销</el-button>
	</div>
</template>

<script>
	import Vuex from 'vuex'
	let mapState = Vuex.mapState;
	import productMixin from '@/views/product/productMixin.js'
	export default{
		data(){
			return{
				m:"",
			}
		},
		mixins:[productMixin],
		mounted() {
		},
		methods:{
			next(){
				//还要将步骤条推一步
				this.$store.commit('activeProductAddStep',1);
				//下一个div
				this.$router.push("/product/product/add/sales")
			},
			handleChange(value) {
				console.log(value);
				this.productAddData.productCategoryId = value[1];
				this.pcatOptions.forEach(data=>{
					if(data.id == value){
						this.productAddData.productCategoryName = data.name;
					}
				})
			},
			handleBrandChange(value) {
				this.productAddData.brandId = value[0];
				this.brandOptions.forEach(data=>{
					if(data.id == value){
						this.productAddData.brandName=data.name;
					}
				})
			}
		},
		computed:{
			...mapState(["activeProductAddStep","productAddData"]),
		},
	}
</script>

<style lang="scss" scoped="scoped">
	.pinfo-box{
		margin-top:50px;
		.el_input {
			height:32px;
			.el_input__inner{
				height:32px !important;
			}
		}
		.el-row{
			margin:20px;
			line-height: 32px;
		}
		
		
	}
</style>
